<template>
  <div class="school-detail-wrap">
    <div class="school-banner">
      <div class="margin-align">
        <div class="tab">
          <div class="tab-item"
              v-for="(item, index) in tabNameData"
              :key="index"
              :class="item.value===curTab?'tabActive':''"
              @click="changeTab(item.value, index)">{{item.title}}</div>
        </div>
      </div>
    </div>
    <div class="margin-align">
      <school-introduction v-if="curTab==='schoolIndroduction'"></school-introduction>
      <!-- 各系 -->
      <department v-else :curDep="curDep"></department>
    </div>
  </div>
</template>
<script>
import schoolIntroduction from '@/components/talents/schoolDetail/schoolIntroduction' // 学校介绍
import department from '@/components/talents/schoolDetail/department' // 各系
export default {
  layout: 'teach',
  data () {
    return {
      tabNameData: [ // 学校tab
        {
          title: '学校介绍',
          value: 'schoolIndroduction'
        },
        {
          title: '信息工程系',
          value: 'infoDep'
        },
        {
          title: '机械工程系',
          value: 'machineDep'
        }
      ],
      curTab: 'schoolIndroduction', // 当前tab
      curDep: 0 // 当前哪个系
    }
  },
  components: {
    schoolIntroduction,
    department
  },
  methods: {
    // 切换tab
    changeTab (val, index) {
      if (index>1) return
      this.curTab = val
    }
  }
}
</script>
<style lang="stylus" scoped>
.school-detail-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .school-banner {
    background: url('/img/talents/school/banner.png') no-repeat center;
    height: 303px;
    background-color: #4575fe;
    position: relative;
    .tab {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0
      height: 62px;
      .tab-item {
        font-size: 20px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        margin-right: 60px;
        padding-bottom: 10px;
        border-bottom: 2px solid transparent;
        font-weight: 400;
        cursor:pointer
        &:nth-child(-n+2) {
          &:hover {
            color: #ffffff;
            font-weight: bold;
          }
        }
      }
      .tabActive {
        color: #ffffff;
        border-bottom: 2px solid #ffffff;
        font-weight: bold;
      }
    }
  }
}
</style>